<template>
  <div class="hello" style="background: #ffffff;">
    <VueDraggableArea
      :data="data"
      :gridBg="['#24292E',20, 'rgba(255,255,255,0.2)']"
    ></VueDraggableArea>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      data: [
        {
          id: '1',
          component: 'left',
          title: '我的拖拽组件left',
          width: 0.5,
          height: 0.5,
          x: 0.25,
          y: 0.25,
          headerBg: '#909399',
          headerColor: '#ffffff',
          exchangeBorder: '2px solid #e6a23c'
        }

      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
